<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>联系人分类报表</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/ruoyi.css}" rel="stylesheet"/>
    <style>
        .category-card {
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .family-card {
            background-color: #f8f9fa;
            border-left: 4px solid #ff7675;
        }
        .friend-card {
            background-color: #f8f9fa;
            border-left: 4px solid #74b9ff;
        }
        .chart-container {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <!-- 顶部导航栏 -->
    <header th:replace="~{fragments/header::header}"></header>

    <!-- 左侧菜单栏 -->
    <aside th:replace="~{fragments/sidebar::sidebar}"></aside>

    <!-- 内容区域 -->
    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                联系人分类报表
                <small>家人和朋友分类统计</small>
            </h1>
        </section>

        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">分类统计概览</h3>
                            <div class="box-tools pull-right">
                                <button type="button" class="btn btn-box-tool" data-widget="collapse">
                                    <i class="fa fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="box-body">
                            <!-- 分类卡片 -->
                            <div class="row">
                                <div th:each="item : ${datacountBycategory}" class="col-md-6">
                                    <div th:classappend="${item.category == '家人'} ? 'family-card' : 'friend-card'" class="category-card">
                                        <h3 th:text="${item.category}">分类</h3>
                                        <p>联系人数量: <span th:text="${item.count}" class="text-bold"></span></p>
                                    </div>
                                </div>
                            </div>

                            <!-- 图表区域 -->
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="chart-container">
                                        <!-- 嵌入扇形图 -->
                                        <iframe th:src="@{/contact/drawPie}" frameborder="0" style="width:100%;height:100%;"></iframe>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <table class="table table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th>分类</th>
                                            <th>数量</th>
                                            <th>占比</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="item : ${datacountBycategory}">
                                            <td th:text="${item.category}">分类</td>
                                            <td th:text="${item.count}">数量</td>
                                            <td th:text="${#numbers.formatDecimal(item.count/sum, 1, 2)} + '%'">
                                                占比
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>总计</th>
                                            <th th:text="${sum}">总计</th>
                                            <th>100%</th>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="box-footer">
                            <div class="row">
                                <div class="col-sm-12 text-right">
                                    <button type="button" class="btn btn-primary" onclick="window.print()">
                                        <i class="fa fa-print"></i> 打印报表
                                    </button>
                                    <button type="button" class="btn btn-success" onclick="exportData()">
                                        <i class="fa fa-download"></i> 导出数据
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- 页脚 -->
    <footer th:replace="~{fragments/footer::footer}"></footer>
</div>

<!-- JavaScript -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/ruoyi.js}"></script>
<script>
    // 计算总数
    var sum = 0;
    <th:block th:each="item : ${datacountBycategory}">
        sum += [[${item.count}]];
    </th:block>

    function exportData() {
        // 导出数据逻辑
        window.location.href = ctx + "contact/report/export";
    }
</script>
</body>
</html>